<template>
  <div class="border-b-2 border-b-red-500 py-4 text-center text-lg font-semibold">涨速板块</div>
  <div class="mx-1 flex flex-col space-y-2">
    <template v-for="item in list" :key="item.plate_id">
      <div class="w-full max-w-md rounded-lg border border-gray-200 bg-white p-4 shadow sm:p-8">
        <div class="mb-4 flex items-center justify-between border-b-2 border-red-500" @click="Utils.forwordBk(item.plate_id)">
          <div class="cursor-pointer font-semibold leading-none">
            {{ item.plate_name }}
          </div>
          <a href="#" class="text-sm font-semibold hover:underline" :class="item.pcp > 0 ? 'text-red-500' : 'text-green-600'">
            {{ (item.pcp * 100).toFixed(2) }}%
          </a>
        </div>
        <div class="flow-root">
          <ul role="list" class="divide-y divide-gray-200">
            <template v-for="(stock, i) in item.stocks" :key="stock.symbol">
              <template v-if="i < 2">
                <li class="py-2">
                  <div class="flex justify-between" @click="Utils.forwordGu(stock.symbol)">
                    <div class="min-w-0 flex-1">
                      <p class="cursor-pointer truncate text-sm font-semibold">
                        {{ stock.name }}
                      </p>
                    </div>
                    <div class="inline-flex items-center text-base font-semibold text-red-500">
                      <span>{{ (stock.mtm * 100).toFixed(2) }}</span>
                      <svg class="h-4 w-4 fill-current text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                        <path
                          fill-rule="evenodd"
                          d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"
                          clip-rule="evenodd"
                        />
                      </svg>
                    </div>
                  </div>
                </li>
              </template>
            </template>
          </ul>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>
import axios from 'axios';
import Utils from '../utils/index';
import { ref } from 'vue';

const list = ref([]);

function fetchData() {
  axios.get('https://flash-api.xuangubao.cn/api/plate/incdec?move_type=1&limit=10').then(function (res) {
    let result = res.data.data.items;
    list.value = result;
  });
}
defineExpose({
  fetchData,
});
</script>
